<div ng-controller="userRolesController">

<!-- contain BEGIN -->
    <div class="right-product right-full animate-time" ng-class="{ true: 'right-full', false: 'right-off' }[isActive]">
        <div class="center-back right-back">
            <div class="container-fluid">
                <div class="info-center">
                    <div class="page-header">
                        <div class="pull-left">
                            <h4>角色组列表</h4>
                        </div>
                    </div>

                    <div class="search-box row">
                        <div class="col-md-1">
                            <button type="button" class="btn btn-default" ng-click="newlyAdded($event)" data-toggle="modal" data-target="#newlyAdded">
                                <span class="glyphicon glyphicon-plus"></span> 新增
                            </button>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="table-margin">
                        <table class="table table-bordered table-header">
                            <thead>
                                <tr>
                                    <td class="w10 text-center">角色ID</td>
                                    <td class="w10 text-center">角色组名</td>
                                    <td class="w10 text-center">描述</td>
                                    <td class="w10 text-center">操作</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="val in tabVal">
                                    <td class="text-center">{{ val.roleGroupId }}</td>
                                    <td class="text-center">{{ val.roleGroupName }}</td>
                                    <td class="text-center">{{ val.description }}</td>
                                    <td class="text-center icon-td">
                                        <i class="icon-details" ng-click="details($event, $index)" data-toggle="modal" data-target="#details"></i>
                                        <i class="icon-edit"    ng-click="edit($event, $index)"    data-toggle="modal" data-target="#edit"></i>
                                        <i class="icon-delete"  ng-click="delete($event, $index)"  data-toggle="modal" data-target="#delete"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="12" class="text-center" ng-hide="isNoData">暂无数据</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="12" ng-show="isNoData">
                                        <div class="pull-right">
                                            <nav>
                                                <tm-pagination conf="paginationConf"></tm-pagination>
                                            </nav>
                                        </div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- contain END -->

<!-- 新增 BEGIN -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="newlyAdded">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">新增角色组</h4></div>
                <div class="modal-body">
                	
                <form name="userAdd_form" novalidate>
                        <div class="form-group">
                                <label class="col-xs-12 col-sm-3 control-label text-right">角色组名：</label>
                                <div class="col-xs-12 col-sm-9">
                                    <input type="text" 
                                           name="roleGroupName"
                                           class="form-control" 
                                           autocomplete="off"
                                           ng-minlength="2" 
                                           ng-maxlength="20"  
                                           ng-model="newlyAddedRoleGroupName"
                                           required 
                                    />
                                    <label class="red required">*</label>
                                     <div class="error" ng-show="userAdd_form.roleGroupName.$dirty && userAdd_form.roleGroupName.$invalid">
    								    <small class="error" ng-show="userAdd_form.roleGroupName.$error.required">请输入角色组名</small>
    								    <small class="error" ng-show="userAdd_form.roleGroupName.$error.minlength ">角色组名长度在2-20之间</small>
    								    <small class="error" ng-show=" userAdd_form.roleGroupName.$error.maxlength">角色组名长度在2-20之间</small>
    	 							 </div>
                                </div>       
                        </div>
                  
                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right">描述：</label>
                            <div class="col-xs-12 col-sm-9">
                                <textarea rows="5" type="text" name="description" class="form-control" ng-model="newlyAddedDescription"/></textarea>
                            </div>
                        </div>
    					</form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-disabled="userAdd_form.$invalid"  ng-click="confirmNewlyAdded()">确定</button></div>
            </div>
        </div>
    </div>
<!-- 新增 END -->

<!-- 详情 BEGIN -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="details">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">角色组详细信息</h4>
                </div>
                <div class="modal-body">
                     <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">角色组ID：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="roleGroupId" class="form-control" ng-model="details_roleGroupId" disabled />    
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-xs-12 col-sm-3 control-label text-right">角色组名：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="roleGroupName" class="form-control" ng-model="details_roleGroupName" disabled />    
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-xs-12 col-sm-3 control-label text-right">描述：</label>
                        <div class="col-xs-12 col-sm-9">
                            <!--<input type="text" name="description" class="form-control" ng-model="description" disabled /> -->
                            <textarea rows="5" type="text" name="description"   class="form-control" ng-model="details_description" disabled></textarea>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-xs-12 col-sm-3 control-label text-right">创建时间：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="createDate" class="form-control" ng-model="details_createDate" disabled />    
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">创建人：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="createUserId" class="form-control" ng-model="details_createUserId" disabled />    
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">最后修改时间：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="lastUpdatedDate" class="form-control" ng-model="details_lastUpdatedDate" disabled />    
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-xs-12 col-sm-3 control-label text-right">最后修改人：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="lastUpdatedUserId" class="form-control" ng-model="details_lastUpdatedUserId" disabled />    
                        </div>
                    </div>
    			</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回列表</button>
                </div>
            </div>
        </div>
    </div>
<!-- 详情 END -->

<!-- 修改 BEGIN -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="edit">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改角色组</h4>
                </div>
                <div class="modal-body">
                	<form name="userUpdate_form" novalidate>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">角色组名:</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                	name="roleGroupName" 
                                	ng-minlength="2" 
                                    ng-maxlength="20"  
                                    class="form-control"  
                                    autocomplete="off" 
                                    ng-model="edit_roleGroupName" 
                                    required/>
                                <label class="red required">*</label>
                            
                                <div class="error" ng-show="userUpdate_form.roleGroupName.$dirty && userUpdate_form.roleGroupName.$invalid">
    								<small class="error" ng-show="userUpdate_form.roleGroupName.$error.required">请输入角色组名</small>
    								<small class="error" ng-show="userUpdate_form.roleGroupName.$error.minlength ">角色组名长度在2-20之间</small>
    								<small class="error" ng-show="userUpdate_form.roleGroupName.$error.maxlength">角色组名长度在2-20之间</small>
    		 					</div>
    		 				</div>	
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">描述:</label>
                            <div class="col-xs-12 col-sm-9">
                                <textarea rows="5" type="text" name="description" class="form-control" ng-model="edit_description"/></textarea>
                            </div>
                        </div>
               	 	</form>
               	</div> 	
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-disabled="userUpdate_form.$invalid" ng-click="confirmEdit($event)">修改</button>
                </div>
            </div>
        </div>
    </div>
<!-- 修改 END -->

<!-- 删除 BEGIN -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="delete">
        <div class="modal-dialog delete-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center">删除警告</h4></div>
                <div class="modal-body text-center">请确认是否删除该行角色</div>
                <div class="modal-footer">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary pull-left confirm-del-btn" ng-click="confirmDel()" data-dismiss="modal">确定</button></div>
                </div>
            </div>
        </div>
    </div>
<!-- 删除 END -->

</div>